<template>
  <div class="app-container">
    <!-- main -->
    <div class="main-container">
      <!-- header -->
      <div class="header-box">
        <!-- 查询条件 -->
        <div class="search-box">
          <Row>
            <Col style="margin-right: 20px;">
              <Select v-model="listQuery.productType" placeholder="产品类型" style="width: 200px" @on-change="handleProTypeChange">
                <Option :value="0">相框</Option>
                <Option :value="1">相册</Option>
              </Select>
            </Col>
            <!-- <Col style="margin-right: 20px;">
              <Input v-model="listQuery.proName" placeholder="输入产品名称" maxlength="100" style="width: 100%" clearable></Input>
            </Col>
            <Button type="primary" @click="queryData">查询</Button> -->
          </Row>
        </div>
        <!-- 操作按钮 -->
        <div class="operate-box">
          <Button icon="md-add" type="primary" @click="showAddModal">
            新增
          </Button>
        </div>
      </div>
      <!-- table -->
      <div class="table-box">
        <Table v-if="listQuery.productType === 0" ref="tableRef" :loading="listLoading" :columns="tableColumns" :data="frameList"
          @on-selection-change="handleChange">
          <template slot-scope="{ row, index }" slot="action">
              <Button type="primary" size="small" style="margin-right: 5px"  @click="showEditModal(row)">编辑</Button>
              <Button type="error" size="small" @click="handleDelete(row)">删除</Button>
          </template>
        </Table>
        <Table v-else ref="tableRef" :loading="listLoading" :columns="albumTableColumns" :data="albumList"
          @on-selection-change="handleChange">
          <template slot-scope="{ row, index }" slot="action">
              <Button type="primary" size="small" style="margin-right: 5px"  @click="showEditModal(row)">编辑</Button>
              <Button type="error" size="small" @click="handleDelete(row)">删除</Button>
          </template>
        </Table>
      </div>
      <!-- paging -->
      <div class="pagination-box">
        <Page :total="listTotal" :current.sync="listQuery.pageNo" :page-size="listQuery.pageSize" show-sizer
          show-elevator show-total :page-size-opts="[10, 20, 30, 50]" @on-change="changePageNo"
          @on-page-size-change="changePageSize" />
      </div>
    </div>

    <!-- 弹框 -->
    <!-- 编辑和新增 -->
    <Modal v-model="editModal" :title="editForm.frame_id || editForm.album_id ? '编辑产品' : '添加产品'" width="640px">
      <div class="padding-left-40 padding-right-40">
        <Form ref="editFormRef" :model="editForm" :rules="editFormRules" :label-width="80">
          <FormItem v-if="listQuery.productType === 0" label="相框名称" prop="frame_name">
            <Input v-model="editForm.frame_name" placeholder="输入相框名称" maxlength="100" style="width: 100%" clearable></Input>
          </FormItem>
          <FormItem v-else label="相册名称" prop="album_name">
            <Input v-model="editForm.album_name" placeholder="输入相册名称" maxlength="100" style="width: 100%" clearable></Input>
          </FormItem>
          <FormItem label="价格" prop="price">
            <Input v-model="editForm.price" type="number" placeholder="输入价格" maxlength="100" style="width: 100%" clearable></Input>
          </FormItem>
        </Form>
      </div>
      <div class="text-align-center" slot="footer">
        <Button type="default" @click="editModal = false">取消</Button>
        <Button type="primary" @click="handleSubmit">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  // 引入LimeUtil
  import LimeUtil from "@lime-util/util";
  import axios from "axios";
  import { getAlbum, getFrame } from '@/utils/getInitData'
  import {
    updateFrameApi,
    addFrameApi,
    deleteFrameApi,
    updateAlbumApi,
    addAlbumApi,
    deleteAlbumApi,
    getAllAlbumApi,
    getAllFrameApi,
  } from "@/api/order/index";
  export default {
    data() {
      return {
        // 搜索输入收起和展开
        searchCollapse: true,

        // 列表分页
        listTotal: 0,
        listLoading: false,
        listQuery: {
          productType: 0,
          proName: '',
          pageNo: 1,
          pageSize: 10,
        },
        albumList: [],
        array_frameid_List: [],
        array_album_List: [],
        frameList: [], // 所有相框
        typeList: [],
        // 表格多选和单选
        selectRows: [],
        selectRow: {},

        // 相框表格列数据
        tableColumns: [
          {
            key: "index",
            title: "序号",
            width: 90,
            align: "center",
            render: (h, { row, index }) => {
              return h("span", index + 1);
            },
          },
          {
            title: "产品名称",
            key: "frame_name",
            width: 380,
          },
          {
            title: "价格",
            key: "price",
            width: 120,
          },
          {
            title: "操作",
            slot: "action",
            width: 200,
          },
        ],
        // 相册表格列数据
        albumTableColumns: [
          {
            key: "index",
            title: "序号",
            width: 90,
            align: "center",
            render: (h, { row, index }) => {
              return h("span", index + 1);
            },
          },
          {
            title: "产品名称",
            key: "album_name",
            width: 380,
          },
          {
            title: "价格",
            key: "price",
            width: 120,
          },
          {
            title: "操作",
            slot: "action",
            width: 200,
          },
        ],

        // 新增和编辑
        editModal: false,
        // 表单
        editForm: {
          frame_id: '',
          album_id: '',
          frame_name: "",
          album_name: "",
          price: 0,
        },
        // 表单校验
        editFormRules: {
          frame_name: [{
            required: true,
            trigger: "blur",
            message: "请输入产品名称",
          }, ],
          album_name: [{
            required: true,
            trigger: "blur",
            message: "请输入产品名称",
          }, ],
          price: [{
            type: "number",
            required: true,
            trigger: "blur",
            message: "请输入产品价格",
          }, ]
        },
      };
    },
    watch: {
      '$store.state.layout.app.albumList'(newValue, oldValue) {
        this.albumList = newValue;
      },
      '$store.state.layout.app.frameList'(newValue, oldValue) {
        this.frameList = newValue;
      }
    },
    created() {
      this.frameList = this.$store.state.layout.app.frameList;
    },
    methods: {
      queryData() {

      },
      // 选择拍摄类型事件
      handleProTypeChange(e) {
        console.log(e);
        this.listQuery.productType = e
        if (e === 0) {
          this.frameList = this.$store.state.layout.app.frameList;
        } else if (e === 1) {
          this.albumList = this.$store.state.layout.app.albumList;
        }
      },
      handleAlbum() {

      },
      // 重置查询列表
      handleReset() {
        this.listQuery = {
          pageNo: 1,
          pageSize: 10,
        };
      },
      // 分页
      changePageNo(val) {
        this.listQuery.pageNo = val;
      },
      changePageSize(val) {
        this.listQuery.pageSize = val;
      },

      /**
       * 表格多选
       */
      handleChange(rows) {
        this.selectRows = rows;
      },
      /**
       * 清空表格多选
       */
      handleClearRows() {
        this.$refs.tableRef.selectAll(false);
      },

      /**
       * 新增和编辑
       */
      showAddModal() {
        this.editModal = true;
        if (this.listQuery.productType === 0) {
          // 需要先设置表单数据为空后，再调用重置表单才会起作用
          this.editForm = {
            frame_id: "",
            frame_name: "",
            price: "",
          };
        } else {
          this.editForm = {
            album_id: "",
            album_name: "",
            price: "",
          };
        }
        if (this.$refs.editFormRef) {
          this.$refs.editFormRef.resetFields();
        }
      },
      showEditModal(row) {
        this.editModal = true;
        if (this.listQuery.productType === 0) {
          this.editForm = {
            frame_id: row.frame_id,
            frame_name: row.frame_name,
            price: parseInt(row.price)
          };
        } else {
          this.editForm = {
            album_id: row.album_id,
            album_name: row.album_name,
            price: parseInt(row.price)
          };
        }
      },
      handleSubmit() {
        this.editForm.price = parseInt(this.editForm.price)
        this.$refs.editFormRef.validate((valid) => {
          if (valid) {
            if (this.editForm.frame_id || this.editForm.album_id) {
              this.handleUpdate();
            } else {
              this.handleAdd();
            }
          }
        });
      },
      // 新增
      handleAdd() {
        if (this.listQuery.productType === 0) {
          this.addFrame();
        } else {
          this.addAlbum();
        }
      },
      // 修改
      handleUpdate() {
        if (this.editForm.frame_id) {
          this.updateFrame();
        } else {
          this.updateAlbum();
        }
      },
      // 修改相框
      updateFrame() {
        const formData = new FormData()
        formData.append('frame_id', this.editForm.frame_id)
        formData.append('frame_name', this.editForm.frame_name)
        formData.append('price', this.editForm.price)
        updateFrameApi(formData).then((res) => {
          if (res.rstpCode == '0000') {
            this.$Message.success("修改成功");
            this.editModal = false;
            getFrame();
          } else {
            this.$Message.error(res.rstpMsg);
          }
        });
      },
      // 新增相框
      addFrame() {
        const formData = new FormData()
        formData.append('frame_name', this.editForm.frame_name)
        formData.append('price', this.editForm.price)
        addFrameApi(formData).then((res) => {
          if (res.rstpCode == '0000') {
            this.$Message.success("新增成功");
            this.editModal = false;
            getFrame();
          } else {
            this.$Message.error(res.rstpMsg);
          }
        });
      },
      /**
       * 删除相框
       */
      handleDelete(row) {
        console.log(row);
        this.$Modal.confirm({
          title: "提示",
          content: "确定删除该条数据吗？",
          closable: true,
          onOk: () => {
            if (this.listQuery.productType === 0) {
              deleteFrameApi({
                frame_id:row.frame_id,
              }).then((res) => {
                if (res.rstpCode == '0000') {
                  this.$Message.success("删除成功");
                  getFrame();
                } else {
                  this.$Message.error(res.rstpMsg);
                }
              });
            } else {
              deleteAlbumApi({
                album_id:row.album_id,
              }).then((res) => {
                if (res.rstpCode == '0000') {
                  this.$Message.success("删除成功");
                  getAlbum();
                } else {
                  this.$Message.error(res.rstpMsg);
                }
              });
            }

          },
        });
      },
      // 修改相册
      updateAlbum() {
        const formData = new FormData()
        formData.append('album_id', this.editForm.album_id)
        formData.append('album_name', this.editForm.album_name)
        formData.append('price', this.editForm.price)
        updateAlbumApi(formData).then((res) => {
          if (res.rstpCode == '0000') {
            this.$Message.success("修改成功");
            this.editModal = false;
            getAlbum();
          } else {
            this.$Message.error(res.rstpMsg);
          }
        });
      },
      // 新增相册
      addAlbum() {
        const formData = new FormData()
        formData.append('album_name', this.editForm.album_name)
        formData.append('price', this.editForm.price)
        addAlbumApi(formData).then((res) => {
          if (res.rstpCode == '0000') {
            this.$Message.success("新增成功");
            this.editModal = false;
            getAlbum();
          } else {
            this.$Message.error(res.rstpMsg);
          }
        });
      },


    },
  };
</script>

<style lang="less" scoped></style>
